<template>
  <div class="project_box">
    <div class="pullHeader_box">
      <BaseSearch placeholder="项目名称、疾病、适应症"></BaseSearch>
    </div>
    <van-dropdown-menu active-color="#2F54EB">
      <van-dropdown-item title="疾病">
        <van-cell>
          <van-tree-select />
        </van-cell>
      </van-dropdown-item>
      <van-dropdown-item title="试验分期"> </van-dropdown-item>

      <van-dropdown-item title="地区">
        <van-cell>
          <van-tree-select />
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <BasePullDowm
      v-model:pull="configObjs.pullLoading"
      v-model:listLoading="configObjs.listLoading"
      v-model:listError="configObjs.listError"
      :pull-objs="configObjs.pullObjs"
      :load-objs="configObjs.loadObjs"
      :list-total="configObjs.listTotal"
      :list-data="configObjs.listData"
      @pull-refresh="onRefresh"
      @pull-load="onLoad"
      class="pullDowmBox"
    >
      <div class="pro_box">
        <ProjectItem
          v-for="item in configObjs.listData"
          :key="item.id"
          :pro-data="item"
          :file-list="fileList"
          style="margin-bottom: 16px"
        ></ProjectItem>
      </div>
    </BasePullDowm>
  </div>
</template>

<script setup lang="ts" name="Project">
import { vantComponents } from "@/hooks/useVantModel";
import { getProjectList } from "@/apis/product";
import { usePullDowm } from "@/hooks/usePullDowm";
import BaseSearch from "@/components/BaseSearch/index.vue";
import ProjectItem from "@/components/ProjectItem/index.vue";
const { showToast } = vantComponents();

const { configObjs, methods } = usePullDowm({
  getListApi: getProjectList,
  response: {
    list: "list",
    total: "total"
  },
  defaultParams: unref({})
});
const { onLoad, onRefresh } = methods;
const fileList = ref([
  { label: "适应症", fileId: "indication" },
  { label: "疾病", fileId: "diseases" },
  { label: "机构名称", fileId: "organizationName" },
  { label: "主要研究者", fileId: "mainPi" },
  { label: "开展区域", fileId: "area" }
]);
</script>

<style lang="scss" scoped>
.project_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .pullDowmBox {
    flex: 1;
  }

  .pullHeader_box {
    background-color: #f4f5f6;
  }

  .pro_box {
    padding: 12px 16px;
    background: linear-gradient(179deg, #f0f5ff 0%, #fff 100%);
  }
}
</style>
@/apis/product
